<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>表格属性配置</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" >
    <meta name="generator" content="www.leipi.org" />
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"/>
 <style>
	*{
		outline: none;
	}
	.content{
		width: 821px;
		margin: 13px auto 0;
	}
	.label{
		margin-left: 5px;
	}
	.lenSpan{
		display: inline-block;
		position: relative;
		height: 28px;
		vertical-align: middle;
		border-radius: 4px;
	}
	.delIcon{
		display: none;
		position: absolute;
		width: 16px;
		height: 16px;
		top: 50%;
		right: 0;
		margin-top: -8px;
		cursor: pointer;
	}
	.table{
		border-collapse: separate;
		border-spacing: 0 2px;
	}
	.table th, .table td{
		border-top: none;
		height: 40px;
		line-height: 40px;
		padding: 0;
	}
	.table-condensed thead th{
		background-color: #276AB1;
		color: #FFF;
		font-size: 16px;
	}
	.table-condensed tbody tr{
		margin-top: 2px;
	}
	.table-condensed tbody td{
		height: 40px;
		background-color: #D3E4FE;
	}
	.badge{
		width: 210px;
		height: 28px;
		line-height: 28px;
		border-radius: 2px;
		background: #FFFFFF;
		color: #333333;
		font-size: 14px;
		padding: 0;
		font-weight: normal;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	.data_type, .data_length, .sort{
		width: 111px;
		border: 1px solid #BDC0C9;
		border-radius: 2px;
		padding: 0 0 0 21px;
		color: #666666;
	}
	.sort{
		padding-left: 14px;
	}
	input.isfill,input.query{
		width: 16px;
		height: 17px;
		margin: 0;
	}
	.layui-icon-info{
		display: inline-block;
		width: 20px;
		height: 20px;
		margin-left: 5px;
		vertical-align: middle;
		cursor: pointer;
	}
 </style>
</head>
<body>
	<div class="content">
		<table class="table table-condensed"  id="tbl">
			<thead>
				<tr>
					<th><span>列标题</span></th>
					<th><span>数据类型</span></th>
					<th><span>列长度</span>
						<img class="layui-icon-info" src="./bootstrap/img/detail.png" title="选项中的64指的是64个字母或32个汉字长度"/>
					</th>
					<th><span>排序</span></th>
					<th><span>必填</span></th>
					<th><span>设置查询</span></th>
				</tr>
			</thead>
			<tbody id="tbl1"></tbody>
		</table>
	</div>
</body>
<script type="text/javascript" src="../internal.js"></script>
<script type="text/javascript" src="../jquery-1.7.2.min.js"></script> 
<script type="text/javascript" src="../../../jquery.cookie.js" ></script>
<script type="text/javascript">
	 
	
	var html = [],
		listRules = [], //新属性值
		oldRules = [], //旧属性
		start = editor.selection.getStart(),
		editorTable = start && domUtils.findParentByTagName(start, ["table"], true),
		firstTh;
		if(isIE()){
			firstTh=$(editorTable).find('.firstRow th').eq(0).get(0);
		} else{
			firstTh = editorTable.querySelector('.firstRow th:first-of-type')
		} 
	var	ut = UE.UETable.getUETable(firstTh),
		allTrs = $(editorTable).find('tr'),
		allThs  = setThsOrder(getValueTh()),
		table = $('.table'),
		selectHtml="",
		selectLengthHtml="";//下拉框数据    
		
		$.ajax({
				url: "http://"+window.location.host+"/start/myapi/DC"+"/api/rest/web/custom/DataTypeSelect",
			    type: "post",
				dataType: "json",
				data: {
					tablename: 'com_data_item_fieldtype', 
					access_token: JSON.parse(localStorage.getItem("layuiAdmin")).access_token
				},
				enctype: "application/x-www-form-urlencoded;charset=utf-8",
			    success: function(res) { 
					var selectData=res.data.data;
					if(res.data.retcode==0&&selectData.length>0){
							for(var i=0;i<selectData.length;i++){
								selectHtml+='<option value='+selectData[i].code+'>'+selectData[i].text+'</option>'
							}
					}  
					getLengthFun();
				}
			})  
	function getLengthFun(){
		$.ajax({
				url: "http://"+window.location.host+"/start/myapi/DC"+"/api/rest/web/custom/DataTypeSelect",
			    type: "post",
				dataType: "json",
				data: {
					tablename: 'com_data_item_fieldlength', 
					access_token: JSON.parse(localStorage.getItem("layuiAdmin")).access_token
				},
				enctype: "application/x-www-form-urlencoded;charset=utf-8",
			    success: function(res) { 
					var selectData=res.data.data;
					if(res.data.retcode==0&&selectData.length>0){
							for(var i=0;i<selectData.length;i++){
								selectLengthHtml+='<option value='+selectData[i].code+'>'+selectData[i].text+'</option>'
							}
					}  
					$("#data_length").empty().append(selectLengthHtml);
					showTabl1(); 
				}
			}) 
	}
	function showTabl1(){
		$('#tbl1').empty();  
		for(var i = 0; i < allThs.length; i++){
			html.push(
				'<tr>'+
				' <td style="width:220px;"><span class="badge"></span></td>'+
					'<td title="Tab键切换输入框" class="type_td">'+
						'<select id="data_type'+i+'" class="data_type">'+
							selectHtml+
						'</select>'+
					'</td>'+
					'<td title="Tab键切换输入框">'+
						'<select id="data_length'+i+'" class="data_length">'+
							selectLengthHtml+
						'</select>'+
					'</td>'+
					'<td title="Tab键切换输入框">'+
						'<select id="sort'+i+'" class="sort">'+
							'<option value="null">无</option>'+
							'<option value="1">升序</option>'+
							'<option value="0">降序</option>'+
						'</select>'+
					'</td>'+
				'<td title="Tab键切换输入框">'+
						'<input type="checkbox" id="isfill'+i+'" class="isfill">'+
					'</td>'+
					'<td title="Tab键切换输入框">'+
						'<input type="checkbox" id="query'+i+'" class="query"> '+
					'</td>'+
				'</tr>'
			);
		};
		$('#tbl1').html(html.join(''));

	//再次编辑时候得到该列的统计规则
		var start = editor.selection.getStart(),
		cell = start && domUtils.findParentByTagName(start, ["td","th"], true),
		ruleTrs = document.querySelectorAll('tbody tr');
		$.each(allThs, function(index, item){
			var	typeVal = item.getAttribute('data_type'),
				lenVal = item.getAttribute('data_length'),
				sortVal = item.getAttribute('table_sort'),
				fillVal = item.getAttribute('isfill'),
				queryVal = item.getAttribute('query'),
				content = $(this).find('span').length > 0 ?  $(this).find('span').text() : $(this).text(),
				colText = $.trim(content.replace(/<br>/g, '').replace(/&nbsp;/g, '').replace(/<p>/g, '').replace(/<\/p>/g, '')),
				type_ck = ruleTrs[index].querySelector('.data_type'),
				len_ck = ruleTrs[index].querySelector('.data_length'),
				sort_ck = ruleTrs[index].querySelector('.sort'),
				fill_ck = ruleTrs[index].querySelector('.isfill'),
				query_ck = ruleTrs[index].querySelector('.query'),
				badge = ruleTrs[index].querySelector('.badge');
				typeVal ? type_ck.value = typeVal : '';
				lenVal ? len_ck.value = lenVal : '';
				sortVal ? sort_ck.value = sortVal : '';
				!!colText ? badge.innerText = colText : '';
				fillVal == '1' ? fill_ck.setAttribute('checked','checked') : '';
				queryVal == '1' ?  query_ck.setAttribute('checked','checked') : '';
		});
	}
	dialog.onok = function(){
		var allTrs = document.querySelectorAll('tbody tr');
		for(var m = 0; m < allTrs.length; m++){
			var	dataType = allTrs[m].querySelector('.data_type').value,
				dataLength = allTrs[m].querySelector('.data_length').value,
				colSort = allTrs[m].querySelector('.sort').value,
				colTitle = allTrs[m].querySelector('.badge').innerText,
				allCheck = [],
				res = {},
				arr = [];
				if(browser.ie) {
					var tr = allTrs[m],
						checkbox = tr.querySelectorAll('input[type="checkbox"]'),
						div = document.createElement('div');
					for(var i = 0; i < checkbox.length; i++){
						checkbox[i].checked && div.appendChild(checkbox[i]);
					}
					allCheck = div.querySelectorAll('input');
				}else {
					allCheck = allTrs[m].querySelectorAll('input[type="checkbox"]:checked');	
				}	
				res.data_type = dataType;
				res.data_length = dataLength;
				res.table_sort = colSort;
				res.title = colTitle;
				for(var s = 0; s < allCheck.length; s++){
					arr.push(allCheck[s].className);
				}
				for(var k = 0; k < arr.length; k++){
					arr[k] == 'isfill' ? res.isfill = true : '';
					arr[k] == 'query' ? res.query = true : '';
				}
				listRules.push(res);
		}
		var bool = [];
		for(var m = 0; m < listRules.length; m++){
			var isSame = deepCompare(oldRules[m], listRules[m]);
			bool.push(isSame);
		}
		editor.execCommand("property",listRules, bool);
	}

	//判断两个对象完全相同
	function deepCompare(x, y) {
		var i, l, leftChain, rightChain;
		function compare2Objects(x, y) {
			var p;
			if (isNaN(x) && isNaN(y) && typeof x === 'number' && typeof y === 'number') {
				return true;
			}

			if (x === y) {
				return true;
			}
			if ((typeof x === 'function' && typeof y === 'function') ||
				(x instanceof Date && y instanceof Date) ||
				(x instanceof RegExp && y instanceof RegExp) ||
				(x instanceof String && y instanceof String) ||
				(x instanceof Number && y instanceof Number)) {
				return x.toString() === y.toString();
			}

			if (!(x instanceof Object && y instanceof Object)) {
				return false;
			}

			if (x.isPrototypeOf(y) || y.isPrototypeOf(x)) {
				return false;
			}

			if (x.constructor !== y.constructor) {
				return false;
			}

			if (x.prototype !== y.prototype) {
				return false;
			}

			if (leftChain.indexOf(x) > -1 || rightChain.indexOf(y) > -1) {
				return false;
			}
			for (p in y) {
				if (y.hasOwnProperty(p) !== x.hasOwnProperty(p)) {
					return false;
				} else if (typeof y[p] !== typeof x[p]) {
					return false;
				}
			}

			for (p in x) {
				if (y.hasOwnProperty(p) !== x.hasOwnProperty(p)) {
					return false;
				} else if (typeof y[p] !== typeof x[p]) {
					return false;
				}

				switch (typeof(x[p])) {
					case 'object':
					case 'function':

						leftChain.push(x);
						rightChain.push(y);

						if (!compare2Objects(x[p], y[p])) {
							return false;
						}

						leftChain.pop();
						rightChain.pop();
						break;

					default:
						if (x[p] !== y[p]) {
							return false;
						}
						break;
				}
			}

			return true;
		}

		if (arguments.length < 1) {
			return true; 
		}

		for (i = 1, l = arguments.length; i < l; i++) {

			leftChain = []; 
			rightChain = [];

			if (!compare2Objects(arguments[0], arguments[i])) {
				return false;
			}
		}
		return true;
	}
	//浏览器是否是ie
	function isIE() { //ie?  
		if (!!window.ActiveXObject || "ActiveXObject" in window)  
			{ return true; }  
		else  
			{ return false; }  
	}
	function setThsOrder(ths){
		//思路： 最后一行th 如果rowspan大于1 则重新排序
		var configThs = [],
			deleteThs = []

		$.each(ths, function(index, item){
			var rowspan = item ? item.getAttribute('rowspan') : 1;
			if(rowspan > 1){
				var pos = ut.getCellInfo(item);
				deleteThs.push({ th: item, position: pos.colIndex });
			}else{
				configThs.push(item)
			}
		});
		$.each(deleteThs, function(kndex, ktem){
			configThs.splice(ktem.position, 0, ktem.th);
		});
		
		return configThs;
	}
	
	function getValueTh(){
		var  valueThs = [];  
		$.each(allTrs, function(index, item){
			var hasTh = $(this).find('th');
			if(hasTh && hasTh.length > 0){
				var childNodes = $(this).children();  
				$.each(childNodes, function(kndex, ktem){ 
					var nextCell = ut.getVSideCell(ktem, true); 
					if(isIE()){
						if(nextCell && nextCell.tagName == 'TD'){
							valueThs.push(ktem);
						}
					}else{
						if(nextCell && nextCell.tagName == 'TD' && !nextCell.getAttribute('colspan')){
							valueThs.push(ktem);
						}
					}
					
				});
			}
		});
		return valueThs;
	}
	//获取旧属性值
	var onreadydata = function(){
		var allTrs = document.querySelectorAll('tbody tr');
		for(var m = 0; m < allTrs.length; m++){
			var	dataType = allTrs[m].querySelector('.data_type').value,
				dataLength = allTrs[m].querySelector('.data_length').value,
				colSort = allTrs[m].querySelector('.sort').value,
				colTitle = allTrs[m].querySelector('.badge').innerText,
				allCheck = [],
				res = new Object(),
				arr = [];
				if(browser.ie) {
					var tr = allTrs[m];
					var checkbox = tr.querySelectorAll('input[type="checkbox"]');
					var div = document.createElement('div');
					for(var i = 0; i < checkbox.length; i++){
						var ischeck = checkbox[i].checked;
						if(ischeck){
							div.appendChild(checkbox[i]);
						}
					}
					allCheck = div.querySelectorAll('input');
				}
				else {
					allCheck = allTrs[m].querySelectorAll('input[type="checkbox"]:checked');	
				}	
				res.data_type = dataType;
				res.data_length = dataLength;
				res.table_sort = colSort;
				res.title = colTitle;
				for(var s = 0; s < allCheck.length; s++){
					arr.push(allCheck[s].className);
				}
				for(var k = 0; k < arr.length; k++){
					arr[k] == 'isfill' ? res.isfill = true : '';
					arr[k] == 'query' ? res.query = true : '';
				}
				oldRules.push(res);
			}  
			
		}
		onreadydata();

</script>
</html>
